<template>
  <div id="container"></div>
</template>

<script setup>
import G6 from "@antv/g6";
import axios from "axios";
import { onMounted } from "vue";

onMounted(async () => {
  const container = document.getElementById("container");
  const width = container.clientWidth;
  const height = container.clientHeight || 500;
  const graph = new G6.Graph({
    container: "container",
    width,
    height,
    layout: {
      type: "force",
    },
    defaultNode: {
      size: 20,
    },
  });
  const { data } = await axios.get(
    "/g6Api/antvdemo/assets/data/relations.json"
  );
  graph.read(data);

  function refreshDragedNodePosition(e) {
    const model = e.item.get("model");
    model.fx = e.x;
    model.fy = e.y;
  }

  graph.on("node:dragstart", function (e) {
    graph.layout();
    refreshDragedNodePosition(e);
  });
  graph.on("node:drag", function (e) {
    const forceLayout = graph.get("layoutController").layoutMethods[0];
    forceLayout.execute();
    refreshDragedNodePosition(e);
  });
  graph.on("node:dragend", function (e) {
    // e.item.get('model').fx = null
    // e.item.get('model').fy = null
    refreshDragedNodePosition(e);
  });

  window.onresize = () => {
    graph.changeSize(container.clientWidth, container.clientHeight);
    graph.fitCenter()
  };
});
</script>

<style lang="less" scoped>
#container {
  width: 100%;
  height: 100%;
}
</style>
